<template>
  <a-card title="评审管理" :bordered="false">
    <template #extra>
      <a-button type="primary" @click="operate('新增', {})">
        <plus-outlined />
        新增
      </a-button>
    </template>
    <a-form ref="formStateRef" :model="formState" layout="inline">
      <a-form-item
        name="describe"
        label=""
        :colon="false"
        style="margin: 10px; margin-left: 0px"
      >
        <a-input
          icon="prefix"
          allow-clear
          v-model:value="formState.describe"
          placeholder="请输入问题描述"
          style="width: 220px"
        >
          <template #prefix>
            <img src="../../assets/img/search.svg" alt="" class="searchIcon" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item
        name="code"
        label="项目编号"
        :colon="false"
        style="margin: 10px"
      >
        <a-select
          size="large"
          v-model:value="formState.code"
          allow-clear
          style="width: 220px"
          :fieldNames="{ label: 'label', value: 'value' }"
          :options="data.projectList"
          placeholder="请选择"
        >
        </a-select>
      </a-form-item>
      <a-form-item
        name="followPerson"
        label="跟进人"
        :colon="false"
        style="margin: 10px"
      >
        <a-select
          size="large"
          v-model:value="formState.followPerson"
          allow-clear
          style="width: 220px"
          :fieldNames="{ label: 'label', value: 'id' }"
          :options="data.addressbook"
          placeholder="请选择"
        >
        </a-select>
      </a-form-item>
      <a-form-item
        name="state"
        label="问题状态"
        :colon="false"
        style="margin: 10px"
      >
        <a-select
          size="large"
          v-model:value="formState.state"
          allow-clear
          style="width: 220px"
          :fieldNames="{ label: 'label', value: 'value' }"
          :options="data.stateList"
          placeholder="请选择"
        >
        </a-select>
      </a-form-item>
      <a-form-item style="margin: 10px 10px 10px 0px">
        <a-button type="primary" ghost html-type="submit" @click="query">
          查询
        </a-button>
        <a-button @click="reset" style="margin-left: 10px"> 重置 </a-button>
      </a-form-item>
    </a-form>
    <a-table
      :columns="columns"
      :data-source="data.tableList"
      :pagination="false"
      bordered
      :loading="data.loading"
      style="margin: 15px 0px"
    >
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.dataIndex === 'state'">
          <span v-if="record.state == '1'">待处理</span>
          <span v-if="record.state == '2'">已处理</span>
        </template>
        <template v-if="column.dataIndex === 'operation'">
          <a-button type="link" @click="operate('查看', record)">查看</a-button>
          <a-button
            type="link"
            v-if="record.state == '2'"
            @click="operate('处理', record)"
            >处理</a-button
          >
        </template>
      </template>
    </a-table>
    <a-pagination
      v-model:pageSize="pageSize"
      v-model:current="current"
      show-size-changer
      show-quick-jumper
      @change="onChange"
      :total="data.total"
      :show-total="() => `共 ${data.total}条`"
    />
  </a-card>
  <!-- 新增、编辑、查看 -->
  <view-dialog ref="formEdit" :row="row" :title="title" @onSumbit="onSumbit" />
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import { getList, deleteItem } from "../../api/project";
import type { UnwrapRef } from "vue";
import viewDialog from "./child/view.vue";
import moment from "moment";
let current = ref<number>(1);
let pageSize = ref<number>(10);
let row = ref<any>({});
let title = ref<string>("");
const formStateRef = ref<any>();
let formEdit = ref<any>(null);
interface FormState {
  describe: string | undefined;
  code: string | undefined;
  followPerson: string | undefined;
  state: string | undefined;
}
const formState: UnwrapRef<FormState> = reactive({
  describe: "",
  code: undefined,
  followPerson: undefined,
  state: undefined,
});
const data = reactive<any>({
  tableList: [],
  loading: false,
  total: 0,
  projectList: [],
  addressbook: [],
  stateList: [
    {
      label: "未开始",
      value: 1,
    },
    {
      label: "进行中",
      value: 2,
    },
    {
      label: "已结束",
      value: 3,
    },
  ],
});
const columns = reactive<any>([
  {
    title: "序号",
    scopedSlots: "num",
    width: 70,
    customRender: ({ text, index }: any) =>
      `${(current.value - 1) * pageSize.value + (index + 1)}`,
  },
  {
    title: "问题描述",
    dataIndex: "describe",
    key: "describe",
    sorter: true,
    ellipsis: true,
  },
  {
    title: "跟进人",
    dataIndex: "followPerson",
    key: "followPerson",
    ellipsis: true,
  },
  {
    title: "问题状态",
    dataIndex: "state",
    key: "state",
    ellipsis: true,
  },
  {
    title: "解决时间",
    dataIndex: "date",
    key: "date",
    ellipsis: true,
    customRender: ({ text, index }: any) => {
      return text == null ? "" : moment(text).format("YYYY-MM-DD");
    },
  },
  {
    title: "所属项目",
    dataIndex: "project",
    key: "project",
    ellipsis: true,
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
  },
]);
const operate = (str: string, record: any) => {
  title.value = str;
  row.value = record;
  formEdit.value.openModel();
};
const onSearch = () => {};
const query = () => {};
const reset = () => {
  formStateRef.value.resetFields();
};
const getTable = () => {
  // data.loading = true;
};
const onSumbit = () => {
  current.value = 1;
  getTable();
};

const onChange = (num: number) => {
  current.value = num;
  getTable();
};
onMounted(() => {
  getTable();
});
</script>

<style scoped lang="less">
.searchIcon {
  width: 20px;
  height: 20px;
  margin-top: -4px;
}
:deep(.ant-form-item-control-input-content) {
  height: 40px;
}

:deep(.ant-input-affix-wrapper) {
  height: 40px;
  padding: 0px 8px;

  input {
    height: 30px;
  }
}
.ant-btn {
  border-radius: 8px;
  height: 40px;
}
:deep(.ant-table-cell-ellipsis .ant-table-column-title) {
  overflow: initial;
}
</style>
